import React, { memo } from 'react'
import { NavLink } from 'react-router-dom'
import { Input } from 'antd'
import { SearchOutlined } from '@ant-design/icons'
import { HeaderWrapper, HeaderRight, HeaderLeft } from './style'
import { headerLinks } from '../../common/local-data'

const AppHeader = memo(() => {
  return (
    <HeaderWrapper>
      <div className='content wrap-v1 '>
        <HeaderLeft>
          <a href='#/' className='logo sprite_01'>
            JDMusic
          </a>
          <div className='select-list'>
            {headerLinks.map((link, index) => {
              if (index < 3) {
                return (
                  <div key={link.title} className='select-item'>
                    <NavLink to={link.link}>
                      {link.title}
                      <i className='sprite_01 icon'></i>
                    </NavLink>
                  </div>
                )
              } else {
                return (
                  <div key={link.title} className='select-item'>
                    <a href={link.link} key={link.title}>
                      {link.title}
                    </a>
                  </div>
                )
              }
            })}
          </div>
        </HeaderLeft>
        <HeaderRight>
          <Input className='search' placeholder='音乐/视频/电台/用户' prefix={<SearchOutlined />} />
          <div className='center'>创作者中心</div>
          <div>登录</div>
        </HeaderRight>
      </div>
      <div className='divider'></div>
    </HeaderWrapper>
  )
})

export default AppHeader
